<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>可兑换商品列表</title>
    <style>

        html, body {
            height: 130%;
            margin: 0;
            padding: 0;
        }

        /* 设置背景图样式 */
        body {
            background-image: url('img_13.png');
            background-size: cover; /* 或使用 100% auto */
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed; /* 可选：固定背景图 */
        }

        /* 确保容器高度占满页面 */
        .container {
            min-height: 100vh;
            position: relative;
            padding-top: 100px;
        }

        /* 其他样式保持不变 */
        .carousel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease-in-out;
        }

        .carousel-controls {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

        .carousel-controls button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .modal img {
            max-width: 90%;
            max-height: 80%;
        }

        .modal.show {
            display: flex;
        }

        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #fff;
            border: none;
            padding: 5px;
            border-radius: 50%;
            cursor: pointer;
        }

        .button-container {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
        }

        .top-left-button {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .page-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            font-weight: bold;
        }

        .table {
            font-size: 14px;
            background-image: url('img_13.png');
            background-size: cover;
            background-position: center;
            opacity: 0.9;
        }

        .table td, .table th {
            padding: 12px;
            vertical-align: middle;
            background-color: rgba(255, 255, 255, 0);
        }

        .table img {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app" class="container-fluid py-5">
    <!-- 左上角按钮容器 -->
    <div class="top-left-button">
        <button @click="goToOrderHistory" class="btn btn-primary">订单记录</button>
    </div>

    <!-- 右上角按钮容器 -->
    <div class="button-container">
        <button @click="exit" class="btn btn-danger">返回</button>
    </div>

    <!-- 标题 -->
    <h1 class="page-title">可兑换商品列表</h1>

    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <form @submit.prevent="applyFilters" class="bg-white rounded p-3 shadow-sm">
                    <div class="form-group">
                        <label for="categoryFilter" class="font-weight-bold">商品类别</label>
                        <select v-model="filters.category" id="categoryFilter" class="form-control">
                            <option value="">全部类别</option>
                            <option value="电子">电子</option>
                            <option value="服装">服装</option>
                            <option value="家居">家居</option>
                            <option value="食品">食品</option>
                            <option value="运动">运动</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="sortBy" class="font-weight-bold">排序方式</label>
                        <select v-model="filters.sortBy" id="sortBy" class="form-control">
                            <option value="sales_count">按销量排序</option>
                            <option value="price">按积分排序</option>
                            <option value="category">按类别排序</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">筛选</button>
                </form>
            </div>
            <div class="col-md-9">
                <div class="bg-white rounded p-3 shadow-sm">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th scope="col">图片</th>
                            <th scope="col">商品名称</th>
                            <th scope="col">类别</th>
                            <th scope="col">积分</th>
                            <th scope="col">销量</th>
                            <th scope="col">库存</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in items" :key="item.id">
                            <td>
                                <img :src="item.imageUrl" alt="商品图片" style="width: 50px; height: 50px;" @click="openModal(item.imageUrl)" />
                            </td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.category }}</td>
                            <td>{{ item.price }}</td>
                            <td>{{ item.sales_count }}</td>
                            <td>{{ item.stock }}</td>
                            <td><button class="btn btn-success" @click="redeem(item)">兑换</button></td>
                        </tr>
                        </tbody>
                    </table>
                    <nav aria-label="Page navigation" class="mt-3">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" :class="{ disabled: page === 1 }">
                                <button class="page-link" @click="changePage(page - 1)">上一页</button>
                            </li>
                            <li class="page-item" v-for="p in totalPages" :key="p" :class="{ active: p === page }">
                                <button class="page-link" @click="changePage(p)">{{ p }}</button>
                            </li>
                            <li class="page-item" :class="{ disabled: page === totalPages }">
                                <button class="page-link" @click="changePage(page + 1)">下一页</button>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div v-if="modalVisible" class="modal show" @click.self="closeModal">
        <img :src="modalImage" alt="放大图片" />
    </div>
</div>

<script>
    const App = {
        data() {
            return {
                items: [],
                filters: {
                    category: '',
                    sortBy: 'sales_count',
                },
                page: 1,
                totalPages: 1,
                totalItems: 0,
                modalVisible: false,
                modalImage: ''
            };
        },
        methods: {
            fetchProducts() {
                let url = "/api/products";
                let params = {
                    category: this.filters.category,
                    sortBy: this.filters.sortBy,
                    page: this.page,
                    pageSize: 5,
                };
                axios.get(url, { params })
                    .then(response => {
                        this.items = response.data.items;
                        this.totalItems = response.data.totalItems;
                        this.totalPages = Math.ceil(this.totalItems / 5);
                    })
                    .catch(error => {
                        console.error("访问出错了：", error);
                    });
            },
            applyFilters() {
                this.page = 1;
                this.fetchProducts();
            },
            changePage(newPage) {
                if (newPage < 1 || newPage > this.totalPages) return;
                this.page = newPage;
                this.fetchProducts();
            },
            openModal(imageUrl) {
                this.modalImage = imageUrl;
                this.modalVisible = true;
            },
            closeModal() {
                this.modalVisible = false;
                this.modalImage = '';
            },
            exit() {
                window.history.back();
            },
            goToOrderHistory() {
                window.location.href = `/order-history.html`;
            },
            redeem(item) {
                const userId = new URLSearchParams(window.location.search).get('userId');
                window.location.href = `/order.html?productId=${item.id}&userId=${userId}&productName=${encodeURIComponent(item.name)}`;
            }
        },
        mounted() {
            this.fetchProducts();
        },
    };
    const app = Vue.createApp(App);
    app.mount("#app");
</script>
</body>
</html>